<template>
	<view>
		<image class="fanhui" @click="fanhui" src="/static/image/mine/fanhui1.png" mode=""></image>
		
		<u-swiper height="745rpx" indicatorStyle="right: 20px" :list="info.data.images" @change="change" @click="click">

			<template #indicator>
				<view class="imghs xflex-x-center">
					<image class="imghsimg" src="/static/image/mine/imgs.png" mode=""></image>
					<view class="imghstext">
						{{info.data?.images.length}}
					</view>
				</view>
			</template>
		</u-swiper>

		<view class="xp24-32 xbs">
			<view class="title">
				{{info.data.house_name}}
			</view>

			<view class="money xmt40">
				￥{{info.data.price}} <text>/晚</text>
			</view>

			<view class="xflex-x-between xmt60">
				<view class="xflex-x">
					<view class="zan">
						{{info.data.hotel.score}}
					</view>
					<!-- <view class="pj">
						“酒店环境很干净”
					</view> -->
				</view>
				<view class="xflex-x">
					<view class="pj">
						{{list.count}}评价
					</view>
					<image class="pjtp" src="/static/image/mine/jt2.png" mode=""></image>
				</view>
			</view>

			<view class="xflex-x-between xmt24">
				<view class="">
					<view class="dzbt clamp">
						{{info.data.hotel.address}}
					</view>
					<view class="xflex-x xmt24">
						<image class="dztp xmr12" src="/static/image/mine/dw.png" mode=""></image>
						<view class="dzjl">
							{{info.data.hotel.distance}}
						</view>
					</view>
				</view>
				<view class="xflex-y-center" @click="opadd()">
					<image class="dzdh" src="/static/image/mine/dh.png" mode=""></image>
					<view class="dzwb">
						导航
					</view>
				</view>
			</view>
		</view>

		<view class="xp32 xbgf xbs">
			<view class="attention-title">
				基础信息
			</view>

			<view class="xmt32 xpl10">
				<view class="attention-tag">
					<text class="dot">•</text>
					<text class="">适住年龄</text>
				</view>

				<view class="attention-info xmt20">
					全年龄
				</view>


			</view>

			<view class="xmt32 xpl10">
				<view class="attention-tag">
					<text class="dot">•</text>
					<text class="">注意事项</text>
				</view>

				<view class="attention-info xmt20">
					1. 酒店不可携带宠物入内
				</view>
				<view class="attention-info xmt20">
					2. 酒店不可携带宠物入内. 酒店不可携带宠物入内. 酒店不可
				</view>
				<view class="attention-info xmt20">
					3. 酒店不可携带宠物入内. 酒店不可携带宠物入内. 酒店不可 携带宠物入内
				</view>
			</view>

		</view>


		<view class="xp32 xbgf xbs">
			<view class="attention-title">
				基础信息
			</view>


			<view class="facilities-tag">
				<view class="facilities-tags xflex-y-center" v-for="(item,index) in info.data.labels">
					{{item}}
				</view>
			</view>
		</view>

		<view class="xp32 xbgf xbs">
			<view class="attention-title">
				优惠政策
			</view>

			<view class="xmt32 xpl10">
				<view class="attention-tag">
					<text class="dot">•</text>
					<text class="">儿童</text>
				</view>

				<view class="attention-info xmt20">
					水疗中心：1.2m以内儿童免费，1.2-1.4m儿童半价
				</view>
			</view>
		</view>


		<view class="evaluation">
			<view class="evaluation-title">
				点评({{list.count}}）
			</view>


			<view class="" v-for="(items,index) in list.lists">
				<view class="xflex-x-between xmt32">
					<view class="xflex-x">
						<image class="avatar xmr10" :src="items.user.avatar" mode=""></image>
						<view class="">
							<view class="name">
								{{items.user.nickname}}
							</view>
							<view class="">
								<image v-for="(item,index) in info.data.hotel.star" :key="index" class="xing"
									src="/static/image/mine/xing.png" mode=""></image>
							</view>
						</view>
					</view>
					<view class="time">
						{{items.createtime}}
					</view>
				</view>
				<view class="xmt40">
					<view class="pr">
						<view class="xin pa">
							<view class="yzdp pr">
								<image class="yzdpbg pa" src="/static/image/mine/yzdp.png" mode=""></image>
								<view class="yzdptxt pa">
									优质点评
								</view>
							</view>
						</view>

						<view class="yzdpwb">
							{{items.content}}
						</view>

						<view class="xmt32">
							<!-- <image class="yzdptp" v-for="ite in item.images" :src="ite" mode=""></image> -->
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>


	<u-popup :show="false" @close="close" @open="open">
		<view class="popup pr">
			<image class="popup-pgb pa" src="/static/image/mine/pgb.png" mode=""></image>
			<view class="popup-title xmt40">
				优惠券
			</view>

			<view class="">
				<u-tabs :list="list1" @click="click"></u-tabs>
			</view>

			<view class="">
				<scroll-view scroll-y="true">
					<view class="yhq">
						<view class="yhq-item pr">
							<image class="yhq-bg pa" src="/static/image/mine/yhq.png" mode=""></image>

							<view class="yhq-box xflex-x-between pa">
								<view class="xflex-x">
									<image class="yhq-xz" src="/static/image/mine/xz.png" mode=""></image>
									<view class="">
										<view class="yhq-title">
											通用券
										</view>

										<view class="yhq-time">
											2024.03.01-2024.08.31
										</view>
										<view class="yhq-time">
											使用规则：全平台商品通用
										</view>
									</view>
								</view>
								<view class="yhq-money xflex-y-center">
									<view class="yhq-mone">
										￥<text>3</text>
									</view>
									<view class="yhq-btn">
										立即使用
									</view>
								</view>
							</view>
						</view>
					</view>
				</scroll-view>


				<view class="btn">
					确认使用
				</view>
			</view>
		</view>
	</u-popup>
</template>

<script setup>
	import {
		houseinfo,
		commentLists
	} from '@/network/home.js'
	import {
		defineProps,
		defineEmits,
		watchEffect,
		ref,
		onMounted,
		onUnmounted,
		reactive
	} from 'vue'
	import {
		onReachBottom,
		onShow,
		onLoad
	} from '@dcloudio/uni-app';
	import {
		formatDate
	} from "/utils/common.js"
	let info = reactive({
		id: '',
		data: {
			images:[
				 'https://cdn.uviewui.com/uview/swiper/swiper1.png',
			]
		},
	})
	const topage = (url) => {
		uni.navigateTo({
			url: url
		})
	}
	onLoad((option) => {
		info.id = option.id
		getinfo()
		getcommentLists()
	})


	let list = reactive({
		lists: [],
		count: 0

	})
	
	const fanhui = () =>{
		uni.navigateBack()
	}

	const opadd = () => {
		uni.openLocation({
			latitude: Number(info.data.hotel.lat),
			longitude: Number(info.data.hotel.lng),
			scale: 18, // 缩放级别  
			name: info.data.hotel.address, // 在地图上显示标记点的名称  
			address: info.data.hotel.address // 在地图上显示标记点的详细地址  
		});
	}
	const getinfo = () => {
		houseinfo({
			id: info.id,
		}).then(res => {
			console.log(res);
			info.data = res.data
		})
	}

	const getcommentLists = () => {
		commentLists({
			page_no: 1,
			page_size: 10,
			hotel_id: info.id,
		}).then(res => {
			console.log(res);
			list.lists = res.data.lists
			list.count = res.data.count
		})
	}

	let list1 = [{
			name: '可使用优惠券'
		},
		{
			name: '不可使用优惠券'
		}
	]
</script>

<style lang="scss">
	.title {
		font-family: PingFang SC;
		font-weight: bold;
		font-size: 40rpx;
		color: #000000;
		line-height: 40rpx;
	}

	.money {

		font-family: PingFang SC;
		font-weight: 800;
		font-size: 44rpx;
		color: #F3371E;
		line-height: 48rpx;

		&>text {
			font-size: 32rpx;
		}
	}

	.zan {
		width: 127rpx;
		height: 38rpx;
		background: #1892FF;
		border-radius: 0rpx 19rpx 19rpx 19rpx;

		font-family: PingFang SC;
		font-weight: bold;
		font-size: 20rpx;
		color: #FFFFFF;
		line-height: 38rpx;
		text-align: center;
	}

	.pj {
		font-family: PingFang SC;
		font-weight: 400;
		font-size: 24rpx;
		color: #1892FF;
		line-height: 31rpx;
	}

	.pjtp {
		width: 24rpx;
		height: 24rpx;
	}

	.dzbt {
		width: 600rpx;
		font-family: PingFang SC;
		font-weight: bold;
		font-size: 28rpx;
		color: #111111;
	}

	.dztp {
		width: 24rpx;
		height: 24rpx;
	}

	.dzjl {
		font-family: PingFang SC;
		font-weight: 500;
		font-size: 28rpx;
		color: #999999;
	}

	.dzdh {
		width: 49rpx;
		height: 49rpx;
	}

	.dzwb {
		font-family: PingFang SC;
		font-weight: 500;
		font-size: 24rpx;
		color: #1892FF;
	}

	.attention {

		.dot {
			margin-right: 5px;
			color: #ccc;
			/* 小点颜色 */
		}

		&-title {
			font-family: PingFang SC;
			font-weight: 800;
			font-size: 36rpx;
			color: #333333;
			line-height: 40rpx;
		}

		&-tag {
			font-family: PingFang SC;
			font-weight: 800;
			font-size: 28rpx;
			color: #333333;
			line-height: 40rpx;
		}

		&-info {
			font-weight: 500;
			font-size: 24rpx;
			color: #666666;

		}


	}

	.facilities {
		&-tag {
			display: grid;
			grid-template-columns: 1fr 1fr 1fr 1fr;
			margin: 46rpx auto;
			gap: 54rpx 41rpx;
		}

		&-tags {

			font-family: PingFang SC;
			font-weight: bold;
			font-size: 24rpx;
			color: #666666;
			line-height: 40rpx;
			text-align: left;

			border-right: 1rpx solid #CCCCCC;

			&:last-child {
				border: none;
			}

		}
	}

	.fanhui {
		width: 60rpx;
		height: 60rpx;
		position: fixed;
		top: 99rpx;
		left: 20rpx;
		z-index:99999999;
	}

	.evaluation {
		padding: 30rpx;
		box-sizing: border-box;

		&-title {
			font-family: PingFang SC;
			font-weight: bold;
			font-size: 36rpx;
			color: #333333;
		}
	}

	.avatar {
		width: 70rpx;
		height: 70rpx;
		background-color: #1892FF;
		border-radius: 50%;
	}

	.name {
		font-family: PingFang SC;
		font-weight: 500;
		font-size: 30rpx;
		color: #333333;
		margin-bottom: 10rpx;
	}

	.time {
		font-weight: 500;
		font-size: 24rpx;
		color: #999999;
	}

	.yzdp {
		width: 120rpx;
		height: 32rpx;
	}

	.yzdpbg {
		width: 100%;
		height: 100%;

	}

	.yzdptxt {

		font-family: PingFang SC;
		font-weight: 500;
		font-size: 18rpx;
		color: #FFFFFF;
		line-height: 31rpx;
		text-shadow: 0rpx 2rpx 0rpx rgba(99, 55, 11, 0.3);
		left: 40rpx;
	}

	.yzdpwb {
		font-family: PingFang SC;
		font-weight: bold;
		font-size: 24rpx;
		color: #333333;
		text-indent: 130rpx;
	}

	.xin {
		left: 0;
	}

	.yzdptp {
		width: 200rpx;
		height: 200rpx;
		background-color: #1892FF;
		margin-right: 11rpx;
	}

	.popup {
		width: 750rpx;
		height: 1200rpx;
		background: #FFFFFF;
		border-radius: 20rpx 20rpx 0rpx 0rpx;

		&-title {
			font-family: PingFang SC;
			font-weight: bold;
			font-size: 36rpx;
			color: #222222;
			text-align: center;
		}

		&-pgb {
			width: 40rpx;
			height: 40rpx;
			top: 30rpx;
			right: 30rpx;
		}
	}

	.yhq {
		padding: 27rpx 22rpx;
		background-color: #f5f5f5;
		height: 900rpx;

		&-item {
			width: 706rpx;
			height: 220rpx;
			margin: auto;
		}

		&-bg {
			width: 100%;
			height: 100%;
			left: 0;
			right: 0;
		}

		&-box {
			width: 100%;
			height: 100%;
			left: 0;
			right: 0;
			z-index: 1;
		}

		&-xz {
			width: 40rpx;
			height: 40rpx;
			margin-left: 30rpx;
			margin-right: 46rpx;
		}

		&-title {
			font-family: PingFang SC;
			font-weight: bold;
			font-size: 32rpx;
			color: #222222;
			margin-bottom: 26rpx;
		}

		&-time {
			font-family: PingFang SC;
			font-weight: 500;
			font-size: 22rpx;
			color: #222222;
			margin-bottom: 27rpx;
		}

		&-money {
			margin-right: 46rpx;
		}

		&-mone {
			font-family: PingFang SC;
			font-weight: bold;
			font-size: 44rpx;
			color: #FFFFFF;

			&>text {
				font-size: 70rpx;
			}
		}

		&-btn {
			width: 128rpx;
			height: 42rpx;
			background: #FFFFFF;
			border-radius: 21rpx;

			font-family: PingFang SC;
			font-weight: 500;
			font-size: 20rpx;
			color: #EF543F;
			text-align: center;
			line-height: 42rpx;
			margin-top: 28rpx;
		}
	}

	.xing {
		width: 28rpx;
		height: 28rpx;
		margin-right: 10rpx;
	}

	.btn {
		width: 630rpx;
		height: 88rpx;
		background: linear-gradient(90deg, #0DBFFB, #198EFF);
		border-radius: 44rpx;
		text-align: center;
		line-height: 88rpx;

		font-family: PingFang SC;
		font-weight: bold;
		font-size: 30rpx;
		color: #FFFFFF;

		margin: auto;
	}

	.imghs {
		width: 109rpx;
		height: 39rpx;
		background: #00000020;
		border-radius: 20rpx;
		
		@include flex;
		justify-content: center;
	}

	.imghsimg {
		width: 30rpx;
		height: 30rpx;
		margin-right: 15rpx;
	}

	.imghstext {
		font-family: PingFang SC;
		font-weight: 500;
		font-size: 22rpx;
		color: #FFFEFE;
	}
</style>